<template>
  <div>
    <h1>我的商品收藏</h1>
    <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="70%"
        center>
      <span style="">还未进行登录！点击下方按钮前往登录</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="FromLogin">前往登录</el-button>
  </span>
    </el-dialog>
    <div id="collection">
      <div class="card" v-for="(item,index) in collectionData">
        <img :src="item.shopimg">
        <h2>{{ item.shopname }}</h2>
        <div class="action-btns">
          <button @click="showModal(collectionData[index])">查看详情</button>
          <button @click="deleteCollection(item.id)">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Croppa from "vue-croppa";
import "vue-croppa/dist/vue-croppa.css";
import {getCollection} from "@/views/shoplive/shoplive";
import {deleteCollection} from "@/views/shop/shop";

export default {
  name: "ImageUploader",
  components: {Croppa},
  data() {
    return {
      centerDialogVisible: false,
      //从后端获取的收藏商品数据
      collectionData: [],
    };
  }, mounted() {
    //获取收藏
    if (window.sessionStorage.getItem("token") === null) {
      this.centerDialogVisible = true;
    }
    this.getCollection();
  },
  methods: {
    //从后端获取用户的收藏
    getCollection() {
      //分装json字符串
      var result = {}
      result["userId"] = this.$store.state.user.id
      var json = JSON.stringify(result);

      getCollection(json).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '数据加载成功!',
            type: 'success',
            offset: 60
          });
          // res.data[0].shopimg="http://192.168.10.100:8080/home/picture/" + res.data[0].shopimg
          // res.data[0].shopimg02="http://192.168.10.100:8080/home/picture/" + res.data[0].shopimg02
          // res.data[0].shopimg03="http://192.168.10.100:8080/home/picture/" + res.data[0].shopimg03
          res.data[0].shopimg="http://111.229.186.198:8080/home/picture/" + res.data[0].shopimg
          res.data[0].shopimg02="http://111.229.186.198:8080/home/picture/" + res.data[0].shopimg02
          res.data[0].shopimg03="http://111.229.186.198:8080/home/picture/" + res.data[0].shopimg03
          this.collectionData = res.data
        } else {
          this.$message({
            message: '还没有收藏的商品!',
            type: 'error',
            offset: 60
          });
        }
      })
    },
    //前往登录页面按钮方法
    FromLogin() {
      this.centerDialogVisible = false
      this.$router.push({
        path: 'login'
      })
    },
    //打开详情页
    showModal(str) {
      //将js对象转化为json格式字符串传输
      var string = JSON.stringify(str)
      this.$router.push({path: '/shopdetail', query: {string}})
    },
    //删除收藏
    deleteCollection(shopId) {
      //分装json字符串
      var result = {}
      result["userId"] = this.$store.state.user.id
      result["shopId"] = shopId
      var json = JSON.stringify(result);

      deleteCollection(json).then(res => {
        if (res.code === 200) {
          this.$message.success("数据加载成功")
          location.reload();
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
};
</script>

<style>
body {
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
}

.card {
  display: inline-block;
  width: 300px;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

.card img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
}

.card h2 {
  font-size: 18px;
}

.card p {
  font-size: 14px;
}


.card .action-btns {
  margin-top: 15px;
}

.action-btns button {
  padding: 8px 12px;
  margin-right: 5px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.action-btns button:hover {
  background-color: #45a049;
}
</style>

